<!--
/**
* Author: gqz
* Date: 2021-08-26 16:53
* Desc: ZmPopupPicker
*/
-->
<template>
  <view :style="customStyle" :class="customClass">
    <zm-popup v-model="visible" :closeable="false" v-if="visible">
      <view class="zm-popup-picker">
        <view class="zm-popup-picker__header flex flex-b flex-m">
          <view @click="handelCancel">取消</view>
          <view @click="handelConfirm">确定</view>
        </view>
        <view class="zm-popup-picker__search" v-if="hasSearch">
          <u-search
            placeholder="请输入搜索关键字"
            v-model="search"
            shape="shape"
            :show-action="false"
          ></u-search>
        </view>
        <picker-view
          class="pick-main"
          :value="defaultIndex"
          immediate-change="false"
          indicator-style="height: 88rpx"
          @change="handelChange"
          @pickend="handelEnd"
        >
          <picker-view-column class="zm-popup-picker__view">
            <view
              class="zm-popup-picker__item flex"
              v-for="item in resultList"
              :key="item.zmValue"
            >
              {{ item.zmName }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </zm-popup>
  </view>
</template>

<script lang="ts">
  import styleMixins from '@/mixins/styleMixins'
  import { Mixins, Component, Prop, Emit } from 'vue-property-decorator'
  import ZmPopup from '@/commons/ZmPopup/index.vue'
  import config from '@/config/index'
  import { deep } from '@/utils'
  @Component({
    name: 'ZmPopupPicker',
    components: { ZmPopup }
  })
  export default class ZmPopupPicker extends Mixins(styleMixins) {
    @Prop(Boolean) value!: boolean //展示
    @Prop(Boolean) hasSearch!: boolean //是否有搜索
    @Prop({ type: String, default: config.labelKey }) labelKey!: string
    @Prop({ type: String, default: config.valKey }) valKey!: string
    @Prop({ type: [String, Number] }) checkVal!: string | number //默认选择的值
    @Prop({
      type: Array,
      default() {
        return []
      }
    })
    list!: any[] //数据列表

    get currentList() {
      const list = deep(this.list) as any[]
      return list.map((i) => {
        i.zmName = i[this.labelKey] || ''
        i.zmValue = i[this.valKey] || ''
        return i
      })
    }
    search = '' //搜索关键字
    get resultList() {
      const v = this.search.toString().toLowerCase()
      return this.currentList.filter((i) => {
        const name = i.zmName.toString().toLowerCase() as string
        return name.includes(v)
      })
    }

    get visible() {
      return this.value
    }

    set visible(v) {
      this.$emit('input', v)
    }

    defaultIndex = [0] //默认选中下标
    checkIndex = 0 //选中的下标

    created() {
      this.setDefaultIndex()
    }

    init() {
      this.setDefaultIndex()
    }

    setDefaultIndex() {
      let index = this.resultList.findIndex(
        (i) => i[this.valKey] == this.checkVal
      )
      index = index === -1 ? 0 : index
      this.defaultIndex = [index]
      this.checkIndex = index
    }

    handelEnd(data) {
      console.log('handelEnd', data)
      //#ifdef MP-TOUTIAO
      const value = data.detail.value || []
      const [firstVal] = value
      this.checkIndex = firstVal
      //#endif
    }
    handelChange(data) {
      console.log('handelChange', data)
      //#ifndef MP-TOUTIAO
      const value = data.detail.value || []
      const [firstVal] = value
      this.checkIndex = firstVal
      //#endif
    }
    handelCancel() {
      this.visible = false
    }

    handelConfirm() {
      // setTimeout(() => {
      const data = this.resultList[this.checkIndex]
      console.log(data, 'data', this.checkIndex, this.resultList)
      this.confirm(data)
      this.visible = false
      // }, 150)
    }

    @Emit()
    confirm(e) {
      return e || {}
    }
  }
</script>

<style lang="scss" scoped>
  .pick-main {
    min-height: 600rpx;
  }
  .zm-popup-picker {
    &__header {
      height: 88rpx;
      font-size: 28rpx;
      padding: 0 32rpx;
      box-sizing: border-box;
      color: $mainColor;
      border: 1px solid #ebedf0;
    }

    &__search {
      padding: 20rpx 32rpx;
      height: 100rpx;
    }

    &__view {
      width: 750rpx;
      // #ifndef MP-ALIPAY
      height: 600rpx;
      // #endif
      margin-top: 20rpx;
    }

    &__item {
      height: 88rpx;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }
</style>
